<template>
	<view class="page area-b">
		<u-navbar :border-bottom="false">
		</u-navbar>
		<view class="body">
			<view class="logo-box">
				<image class="logo" src="/static/logo.png" mode="aspectFill"></image>
				<view class="u-font-36 text-bold u-m-t-50">安全·隐私·稳定·高效</view>
			</view>
			<view class="login-box">
				<view class="btn" @tap="jumpTo('/pages/login/phone')">
					手机验证码登录/注册

				</view>
				<view class="btn" @tap="jumpTo('/pages/login/password')">
		手机号+密码登录
				</view>
				<view class="btn" @tap="jumpTo('/pages/login/loginZ')" style="background: #fed438;  color: black;">
			用户号登录/注册

						</view>
				<!-- #ifdef APP -->
		<!--		<view v-if="!examine" class="btn wchat" @tap="wxLogin">
					微信登录
				</view>          -->
				<!-- #endif -->
				
			</view>
		</view>
		<view class="foot">
			<u-checkbox v-model="agree" shape="circle">
				<text class="text-gray u-font-26">
					登录即表明同意
					<text class="text-blue" @tap.stop="jumpTo('/pages/agreement/agreement?id=shiyong')">《用户使用协议》</text>
					和
					<text class="text-blue" @tap.stop="jumpTo('/pages/agreement/agreement?id=yinsixieyi')">《隐私条款》</text>
				</text>
			</u-checkbox>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		delay,
		jumpTo,
		goback
	} from '@/utils/util.js'
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	import {wxAppLogin} from "@/api/user.js"
	let weixinAuthService
	export default {
		data() {
			return {
				agree: false,
				shake: false,
				canQuick:false,
				lock:false
			}
		},
		computed: {
			...mapGetters('system',['examine'])
		},
		watch:{
			examine:{
				immediate:true,
				handler(val){
					// #ifdef APP-PLUS
					if(!!weixinAuthService){
						return
					}
					if(val){
						return
					}
					plus.oauth.getServices((services) => {
						weixinAuthService = services.find((service) => {
							return service.id === 'weixin'
						})
					});
					// #endif
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			...mapActions('user', ['login']),
			jumpTo,
			async wxLogin() {
				try {
					await this.checkAgree();
				} catch (e) {
					return
				}
				try {
					uni.showLoading({
						title: '正在登陆中'
					});
					const {
						code
					} = await new Promise((resolve, reject) => {
						weixinAuthService.authorize(resolve, reject)
					})
					console.log('授权完成', code)
					const {
						token,
						userInfo,
						isNewUser,
						setPwd
					} = await wxAppLogin(code)
					console.log('请求完成', token)
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					await this.login({
						token,
						userInfo
					})
					console.log('仓库完成')
					uni.showToast({
						title: '登录成功',
						duration: 1000
					});
					await delay(1000)
					goback()
				} catch (e) {
					console.log(e)
					toast('登录失败')
					await delay(1000)
				} finally {
					uni.hideLoading()
				}
			},
			async checkAgree() {
				if (!this.agree) {
					// #ifdef APP-PLUS
					uni.vibrateShort()
					// #endif
					this.shake = true
					delay(500).then(() => {
						this.shake = false
					})
					throw toast('请勾选同意协议')
				}
			},
			improveAvatar(token){
				return new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/improve/avatar?token=${token}`,
						events:{
							successful:resolve
						},
						fail:reject,
						success(){
							
						}
					})
				})
			},
			improvePwd(token){
				return new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/improve/password?token=${token}`,
						events:{
							successful:resolve
						},
						fail:reject,
						success(){
							
						}
					})
				})
			},
			improvePhone(token){
				return new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/improve/phone?token=${token}`,
						events:{
							successful:resolve
						},
						fail:reject,
						success(){
							
						}
					})
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.page{
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.body{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.foot{
			display: flex;
			justify-content: center;
			height: 120rpx;
			flex-shrink: 0;
		}
	}
	.logo-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		.logo{
			width: 200rpx;
			height: 200rpx;
			border-radius: 10%;
		}
	}
	.login-box{
		margin: 0 60rpx;
		.btn{
			padding: 30rpx 0;
			border-radius: 20rpx;
			background-color: #437ef2;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			+.btn{
				margin-top: 30rpx;
			}
			&.wchat{
				background-color: #74bb73;
				color: #FFFFFF;
			}
			&.theme{
				background-color: $theme-color;
				color: #333333;
			}
		}
	}
</style>
